<script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
import RenderUtil from "../../utils/RenderUtil";
import CustomPrimitive from "../../utils/CustomPrimitive";
import MyPrimitive from "../../primitives/MyPrimitive";
import PolylineFlowMaterialProperty from "../../primitives/PolylineFlowMaterialProperty";

let viewer, baseLayer, enumLayer;
const tianditutkArr = [
  "590447cdbdf97775b57588a69ebb903d",
  "75f1cc913e8d68f7bd4b6f6383f78ceb",
  "4c4c0f03b0bdb58811f657fec0c09eb5",
];
// ['590447cdbdf97775b57588a69ebb903d', '75f1cc913e8d68f7bd4b6f6383f78ceb', '4c4c0f03b0bdb58811f657fec0c09eb5']
const tianditutk =
  tianditutkArr[Math.floor(Math.random() * tianditutkArr.length)];
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZjE5ZTBhZC00YzE1LTQyMWYtOWM4MC00NmFlZjZhOGI3ZDciLCJpZCI6MTI4NTI2LCJpYXQiOjE2OTg4MzczOTN9.26EHXec7Ufty_B4e5_YWcB0t--zlquly7r66WVSS9wE";
// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  108.4,
  21.3,
  129.3,
  48.6
);
const addPostStage = () => {
  const fs = `
  uniform sampler2D colorTexture;		
  uniform sampler2D depthTexture;    
  varying vec2 v_textureCoordinates;    
  uniform float scale;    
  uniform vec3 offset;    
  void main() {        
      vec4 color = texture2D(colorTexture, v_textureCoordinates);        
      gl_FragColor = vec4(color.rgb * scale + offset, 1.0);    
  }`;

}
onMounted(() => {
  baseLayer = new Cesium.ImageryLayer(
    new Cesium.WebMapTileServiceImageryProvider({
      url:
        "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
        tianditutk,
      layer: "tdtImgLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible", //使用谷歌的瓦片切片方式
      show: true,
    })
  );
  viewer = new Cesium.Viewer("cesiumContainer", {
    // animation: false, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码搜索组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D和Columbus Views（CV）模式
    selectionIndicator: false, // 是否显示选取指示器组件
    // timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球
    navigationInstructionsInitiallyVisible: false,
    // terrain: new Cesium.Terrain.fromWorldTerrain({
    //   url: Cesium.IonResource.fromAssetId(3956),
    //   requestWaterMask: true,    // 请求水体效果所需要的海水波浪数据
    //   requestVertexNormals: true   // 请求地形照明数据
    // }),
    baseLayer,
    contextOptions: {
      requestWebgl2: true, // 开启webgl2渲染
    },
  });

  enumLayer = new Cesium.ImageryLayer(
    new Cesium.WebMapTileServiceImageryProvider({
      url:
        "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
        tianditutk,
      layer: "tdtCiaLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible", //使用谷歌的瓦片切片方式
      show: true,
    })
  );
  viewer.imageryLayers.add(enumLayer);
  viewer.imageryLayers.add(enumLayer);
  window.baseLayer = baseLayer;
  window.viewer = viewer;
  window.enumLayer = enumLayer;
  addPostStage()
  // 添加一个面
  PolylineFlowMaterialProperty.register()
  const myarea = viewer.entities.add({
    id: 'myarea1',
    polygon: {
      // 等级制度，包括postions和holes两个属性
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          105.91517, 45.002073,
          109.080842, 45.002073,
          109.91517, 40.002073,
          105.058488, 40.996596
        ])
      },
      height: 0,  // 这个面所处的高度，不是这个面的高
      extrudedHeight: 1000,    // 这个面的高度
      material: new PolylineFlowMaterialProperty({
        color: Cesium.Color.RED,
        glowPower: 0.5,
        taperPower: 0.8
      }),
      // material: Cesium.Color.RED.withAlpha(.5),  // withAlpha 其实就是opacity 透明度
      outline: true,
      fill: true,  // 是否填充颜色
      outlineColor: Cesium.Color.BLACK
    }
  })
});
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style lang="scss">
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  position: relative;

  .cesium-viewer-bottom {
    visibility: hidden;
  }
}
</style>
